<template>
  <div>
    <div class="title">封神榜</div>
    
    <div>
      <div class="good">
        <el-button round type="primary" size="mini" @click="show=!show" style="visibility:hidden;">证书</el-button>
        <span id="qrcode" ref="qrCodeDiv" @click="handleAuthExecuteBtn"></span>
      </div>
      <div id="honor">
        <el-dialog 
          :visible.sync="show" 
          title="证书" 
          append-to-body 
        >
          <div>
            <div align="center" style="color:red;">荣誉证书</div>
            <div>&nbsp;</div>
            <div>{{person.nickname}}同学:</div>
            <div>
              &emsp;&emsp;鉴{{person.schoolName}}{{person.classList[0].className}}的{{person.nickname}}同学({{person.username}})表现优异， 
              在本系统中完成了{{person.userLevel}}道题， 特此荣获了&nbsp;{{setLevel(person.userLevel)}}&nbsp;称号。
            </div>
            <div>&emsp;&emsp;特发此证，以资奖励。</div>
            <div>&nbsp;</div>
            <div align="right">智能化程序设计管理系统</div>
            <div>&nbsp;</div>
            <span id="qrcode" ref="qrCodeDiv"></span>
          </div>
        </el-dialog>
        
      </div>
      <!-- 数据展示 -->
      <el-main>
        <el-table 
          :data="tableData" 
          v-loading="tableLoading"
          stripe
        >
          <!-- 输出需要的信息栏 -->
          <template v-for="item in columnList">
            <el-table-column
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            ></el-table-column>
          </template>
          <el-table-column label="称号">
            <template slot-scope="scope">{{setLevel(scope.row.userLevel)}}</template>
          </el-table-column>
        </el-table>
        <!-- 数据展示方式 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          class="change-page"
        ></el-pagination>
      </el-main>
    </div>
    <div class="footer">
      <el-divider content-position="center">
        <span>• 称号如下 •</span>
      </el-divider>
      <div>
        <span>初学乍练&emsp;初窥门径&emsp;略知一二&emsp;牛刀小试&emsp;登堂入室&emsp;驾轻就熟&emsp;青出于蓝&emsp;融会贯通&emsp;炉火纯青&emsp;出类拔萃&emsp;技冠群雄&emsp;出神入化&emsp;傲视群雄&emsp;登峰造极&emsp;惊世骇俗&emsp;震古烁今&emsp;威震寰宇&emsp;空前绝后&emsp;天人合一&emsp;返璞归真 </span>
      </div>
      <div>
        <span>&emsp;</span>
      </div>
      <div>
        <span>( 每做50道题升一个称号 )</span>
      </div>
    </div>
  </div>
</template>
<script>
const columnList = [
  {
    label: "排名",
    type: "text",
    prop: "ranking",
  },
  {
    label: "昵称",
    type: "text",
    prop: "nickname",
  },
  {
    label: "学号",
    type: "text",
    prop: "userName",
  },
  {
    label: "等级",
    type: "text",
    prop: "userLevel",
  }
];
import { getRankBySchoolId } from "@/api/honor";
import QRCode from 'qrcodejs2';
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      totalSize: 0,
      tableData: [],
      schoolId: null,
      tableLoading: false,
      formLabelWidth: "120px",
      columnList,
      show:false,
      person:{},
      a:0
    };
  },
  created() {
    this.schoolId = JSON.parse(localStorage.getItem("user")).schoolId; //学校Id
    this.person = JSON.parse(localStorage.getItem("user"));
    console.log(JSON.parse(localStorage.getItem("user")));
    this.getTableData();
  },
  methods: {
    getTableData() {
      console.log(this.schoolId);
      this.tableLoading = true;
      getRankBySchoolId({
        schoolId:this.schoolId,
        pageNum: this.currentPage,
        pageSize: this.pagesize,
      })
        .then((res) => {
          //得到所有学生的列表
          console.log(res.data);
          res.data.forEach((element) => {
            element.removeLoading = false;
          });
          this.tableData = res.data;
          this.totalSize = res.total;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    handleSizeChange(size) {
      this.pagesize = size;
      //每页下拉显示数据
      this.getTableData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getTableData();
    },
    creatQrCode() {
      var mydiv = window.location.href;
      console.log(mydiv);
      var qrcode = new QRCode(this.$refs.qrCodeDiv, {
        text: mydiv, // 需要转换为二维码的内容
        width: 50,
        height: 50,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.L
      })
    },
    handleAuthExecuteBtn(){
      this.show = true;
      if(this.a==0){
        this.$nextTick(function(){
          this.creatQrCode();
        });
      }
      this.a=1;
    },
    setLevel(level){
      if(level>950) return "返璞归真";
      if(level>900) return "天人合一";
      if(level>850) return "空前绝后";
      if(level>800) return "威震寰宇";
      if(level>750) return "震古烁今";
      if(level>700) return "惊世骇俗";
      if(level>650) return "登峰造极";
      if(level>600) return "傲视群雄";
      if(level>550) return "出神入化";
      if(level>500) return "技冠群雄";
      if(level>450) return "出类拔萃";
      if(level>400) return "炉火纯青";
      if(level>350) return "融会贯通";
      if(level>300) return "青出于蓝";
      if(level>250) return "驾轻就熟";
      if(level>200) return "登堂入室";
      if(level>150) return "牛刀小试";
      if(level>100) return "略知一二";
      if(level> 50) return "初窥门径";
      return "初学乍练";
    }
  },
  mounted() {
    this.creatQrCode();
  }
};
</script>
<style scoped>
.title {
  font-size: 32px;
  color: #5b8bff;
  font-weight: bold;
}
.change-page{
  margin-top:15px;
}
.el-table /deep/ .el-table__cell, .el-table /deep/ td.el-table__cell, .el-table /deep/ th.el-table__cell.is-leaf {
  border-bottom:none;
  text-align:center;
}
.el-table /deep/ th.el-table__cell.is-leaf{
  color: #7986a6;
  font-weight: 500;
}
.el-table /deep/ td.el-table__cell{
  padding:3px 0;
}
.good{
  text-align: right;
  margin:-35px 30px 10px 0;
}
.good #qrcode /deep/ img{
  float: right;
  clear:both;
}
.el-main{
  overflow: visible;
}
</style>